import React from 'react';
import ReactDOM from 'react-dom/client';

/* 
  表单处理：非受控组件写法(了解即可)
    没有通过 state 控制表单，就是纯粹的操作 DOM
*/

class App extends React.Component {
  handlerClick = () => {
    const from = {
      username: document.querySelector("[name='username']").value,
      desc: document.querySelector("[name='desc']").value,
      city: document.querySelector("[name='city']").value,
      isSingle: document.querySelector("[name='isSingle']").checked,
    };
    console.log('收集的数据为', from);
  };

  render() {
    return (
      <>
        <form>
          姓名：
          <input type='text' name='username' />
          <br />
          描述：
          <textarea name='desc'></textarea>
          <br />
          城市：
          <select name='city'>
            <option value='1'>北京</option>
            <option value='2'>上海</option>
            <option value='3'>广州</option>
            <option value='4'>深圳</option>
          </select>
          <br />
          是否单身：
          <input type='checkbox' name='isSingle' />
          <br />
          <button onClick={this.handlerClick} type='button'>
            点击收集数据
          </button>
        </form>
      </>
    );
  }
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
